<!-- 种公牛精液品质，编辑 -->
<template>
    <el-drawer :model-value="isEditShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
        <template #header>
            <h4 style="font-weight: bold;">编辑</h4>
        </template>
        <el-form ref="formRef" :model="form" label-width="180">
            <el-form-item label="种公牛号" prop="cowId">
                <el-select clearable filterable v-model="form.cowId" placeholder="选择种公牛号">
                    <el-option v-for="item in allComNameList" :label="`${item.code}-${item.breed}`" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="取样日期" prop="sampleDate">
                <el-date-picker style="width: 100%;" v-model="form.sampleDate" type="date" placeholder="选择取样日期" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="报告日期" prop="reportDate">
                <el-date-picker style="width: 100%;" v-model="form.reportDate" type="date" placeholder="选择报告日期" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="精液种类" prop="semenType">
                <el-radio-group v-model="form.semenType">
                    <el-radio :value="0">鲜精</el-radio>
                    <el-radio :value="1">冻精</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 精液编号：选择冻精时才填写 -->
            <el-form-item label="精液编号" prop="semenNo" v-if="form.semenType == 1">
                <el-input clearable v-model="form.semenNo" placeholder="请输入精液编号" />
            </el-form-item>
            <el-form-item label="采精量(ml)" prop="collectionVolume">
                <el-input clearable v-model="form.collectionVolume" placeholder="请输入采精量" />
            </el-form-item>
            <!-- 剂量(ml)（选冻精时才填写） -->
            <el-form-item label="剂量(ml)" prop="dosage" v-if="form.semenType == 1">
                <div class="detailsInfoRow">
                    <el-input style="width: 300px;" clearable v-model="form.dosage" placeholder="请输入剂量" />
                    <span class="detailsInfoSpan">【检测结论】</span>
                    <el-radio-group v-model="form.dosageQualified">
                        <el-radio :value="true" size="large">合格</el-radio>
                        <el-radio :value="false" size="large">不合格</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="精子活力(%)" prop="spermMotility">
                <div class="detailsInfoRow">
                    <el-input style="width: 300px;" clearable v-model="form.spermMotility" placeholder="请输入精子活力" />
                    <span class="detailsInfoSpan">【检测结论】</span>
                    <el-radio-group v-model="form.spermMotilityQualified">
                        <el-radio :value="true" size="large">合格</el-radio>
                        <el-radio :value="false" size="large">不合格</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="前向运动精子数(104个/剂)" prop="forwardMovingSpermCount">
                <div class="detailsInfoRow">
                    <el-input style="width: 300px;" clearable v-model="form.forwardMovingSpermCount" placeholder="请输入前向运动精子数" />
                    <span class="detailsInfoSpan">【检测结论】</span>
                    <el-radio-group v-model="form.forwardMovingSpermCountQualified">
                        <el-radio :value="true" size="large">合格</el-radio>
                        <el-radio :value="false" size="large">不合格</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="精子畸形率(%)" prop="spermAbnormalityRate">
                <div class="detailsInfoRow">
                    <el-input style="width: 300px;" clearable v-model="form.spermAbnormalityRate" placeholder="请输入精子畸形率" />
                    <span class="detailsInfoSpan">【检测结论】</span>
                    <el-radio-group v-model="form.spermAbnormalityRateQualified">
                        <el-radio :value="true" size="large">合格</el-radio>
                        <el-radio :value="false" size="large">不合格</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="菌落总数(CFU/剂)" prop="totalColonyCount">
                <div class="detailsInfoRow">
                    <el-input style="width: 300px;" clearable v-model="form.totalColonyCount" placeholder="请输入菌落总数" />
                    <span class="detailsInfoSpan">【检测结论】</span>
                    <el-radio-group v-model="form.totalColonyCountQualified">
                        <el-radio :value="true" size="large">合格</el-radio>
                        <el-radio :value="false" size="large">不合格</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="上传报告" prop="username">
                <el-upload 
                        ref="uploadRef"
                        class="upload-demo" 
                        action="/api/upload/file"
                        v-model:file-list="fileList"
                        :auto-upload="false"
                        :show-file-list="true"
                        :limit="1"
                        :on-change="onChange"
                        :on-remove="handleRemove"
                        :on-exceed="handleExceed"
                    >
                        <div>
                            <!-- <img v-if="form.reportUrl" :src="form.reportUrl" style="width: 158px; height: 158px; display: block;" /> -->
                            <el-button type="primary">选择文件</el-button>
                        </div>
                    </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAddShow">关闭</el-button>
                <el-button type="primary" @click="confirmAdd">确认</el-button>
            </span>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive, onMounted, onUpdated } from 'vue'
import { reqGetComNameList } from '@/api/company'
import { reqGetSemenQualityAddOrUpdate, reqGetSemenQualityInfo } from '@/api/daily'
import { uploadFileOne } from '@/api/healthManage'
import { ElMessage } from 'element-plus'

let props = defineProps(['isEditShow', 'editId']) // 接收父组件传递过来的数据

let $emit = defineEmits(['closeIsEditShow']) // 自定义事件，关闭弹窗

var fileList = []

// 表单收集
const form = reactive({
    cowId: '', // 牛id
    sampleDate: '', // 取样日期
    reportDate: '', // 报告日期
    semenType: 0, // 精液类型：0-鲜精、1-冻精
    semenNo: '', // 精液编号
    collectionVolume: '', // 采精量 (ml)
    dosage: '', // 剂量 (ml)
    dosageQualified: '', // 剂量是否合格
    spermMotility: '', // 精子活力 (%)
    spermMotilityQualified: '', // 精子活力是否合格
    forwardMovingSpermCount: '', // 前向运动精子数
    forwardMovingSpermCountQualified: '', // 前向运动精子数是否合格
    spermAbnormalityRate: '', // 精子畸形率 (%)
    spermAbnormalityRateQualified: '', // 精子畸形率是否合格
    totalColonyCount: '', // 菌落总数
    totalColonyCountQualified: '', // 菌落总数是否合格
    reportUrl: '', // 报告文件url
})

// 清空表单
const closeForm = () => {
    form.cowId = '', // 牛id
    form.sampleDate = '', // 取样日期
    form.reportDate = '', // 报告日期
    form.semenType = 0, // 精液类型：0-鲜精、1-冻精
    form.semenNo = '', // 精液编号
    form.collectionVolume = '', // 采精量 (ml)
    form.dosage = '', // 剂量 (ml)
    form.dosageQualified = '', // 剂量是否合格
    form.spermMotility = '', // 精子活力 (%)
    form.spermMotilityQualified = '', // 精子活力是否合格
    form.forwardMovingSpermCount = '', // 前向运动精子数
    form.forwardMovingSpermCountQualified = '', // 前向运动精子数是否合格
    form.spermAbnormalityRate = '', // 精子畸形率 (%)
    form.spermAbnormalityRateQualified = '', // 精子畸形率是否合格
    form.totalColonyCount = '', // 菌落总数
    form.totalColonyCountQualified = '', // 菌落总数是否合格
    form.reportUrl = '', // 报告文件url
    fileList = []
}

// 通过id,获取详情
const getSemenQualityInfo = async () => {
    let res = await reqGetSemenQualityInfo({
        id: props.editId
    })
    Object.assign(form, res.data)
    if(res.data.reportUrl){
        fileList = [{name: '报告文件'}]
    }else{
        fileList = []
    }
}

// 上传化验报告
const onChange = (data) => {
    const file = data.raw
    const fd = new FormData()
    fd.append('file', file)
    uploadFileOne(fd).then((res) => {
        if(res.status == 200){
            form.reportUrl = res.data
        }
    })
}
// 移除上传
const handleRemove = () => {
    form.reportUrl = ''
}
// 覆盖
let uploadRef = ref('')
const handleExceed = (files) => {
    uploadRef.value.clearFiles()
    uploadRef.value.handleStart(files[0])
}

// 获取牛号下拉列表
let allComNameList = ref([])
const getComNameList = async () => {
    let res = await reqGetComNameList({
        gender: 1
    })
    allComNameList.value = res.data
}


// 关闭按钮
const closeAddShow = () => {
    $emit('closeIsEditShow', false)
    // 清空表单
    formRef.value.resetFields()
    closeForm()
    uploadRef.value.clearFiles()
}

// 确认，新增精液品质
const formRef = ref()
const confirmAdd = async () => {
    let res = await reqGetSemenQualityAddOrUpdate(form)
    if(res.status == 200){
        ElMessage({
            type: 'success',
            message: res.msg
        })
        $emit('closeIsEditShow', false)
        // 清空表单
        formRef.value.resetFields()
        closeForm()
        uploadRef.value.clearFiles()
    }else{
        ElMessage({
            type: 'warning',
            message: res.msg
        })
    }
}

// 组件挂载完毕
onMounted(() => {
    getComNameList()
})

// 组件更新
onUpdated(() => {
    getSemenQualityInfo()
})
</script>

<style scoped lang="scss">
:deep(.el-upload-list){
    width: 400px !important;
}
.detailsInfoRow{
    width: 100%; 
    display: flex; 
    align-items: center;
    .detailsInfoSpan{
        margin-right: 20px; 
        margin-left: auto;
    }
}
</style>